<template>
    <div class="carousel">
        <a-carousel :style="{ width: '100%', height: '450px', }" :default-current="2" @change="handleChange">
            <a-carousel-item v-for="image in images">
                <a href="item.link" target="_blank">
                    <img :src="image.src" :style="{ width: '100%', height: '100%' }" />
                </a>

            </a-carousel-item>
        </a-carousel>
    </div>

</template>
<script setup lang="ts">
const images = [
    { src: 'https://www.yiaiwang.com.cn/upload/filepath_20210428154444_5483.png', link: 'https://www.yiaiwang.com.cn/index.php?r=index/index/yiaibookstore&f=home' },
    { src: 'https://www.yiaiwang.com.cn/upload/filepath_20241121144733_4104.jpg', link: 'http://ysguangxi.yiaiwang.com.cn/guangxi/web/index.php' },
    { src: 'https://www.yiaiwang.com.cn/upload/filepath_20200715150203_8707.png', link: 'https://www.yiaiwang.com.cn/index.php?r=index/index/guojiziyuan&f=home' },
];
const handleChange = () => {
    console.log('change')
}
</script>
<style scoped>
.carousel {
    width: 100%;
    max-height: 450px;
    position: relative;
    background: #fff;
    margin: 0 auto;
    max-height: 600px;
    overflow: hidden;
}

@media (min-width: 1024px) {}
</style>
